<template>
  <div id="MyRightClickMenu" class="rightClickMenuDiv">
    <ul class="menuUl">
      <template v-for="(item, index) in props.rightMenuList">
        <li
          v-if="true ?? item.showType.includes(listShow)"
          :key="index"
          @click.stop="infoClick(index, item.name, item.handleClick)"
        >
          {{ item.name }}
        </li>
      </template>
    </ul>
  </div>
</template>
<script setup lang="ts" name="MyRightClickMenu">
import { computed, ref, toRaw } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { rightMenuItem } from '@/components/MyRightClickMenu/interface'

export interface MyRightClickMenuProps {
  rightMenuList: rightMenuItem[]
}
const props = withDefaults(defineProps<MyRightClickMenuProps>(), {
  rightMenuList: () => [
    { name: '更换车辆', showType: [0, 1, 5] },
    { name: '更换搅拌楼', showType: [0, 1] },
    { name: '停止生产', showType: [2] },
    { name: '解绑车辆', showType: [1, 5] },
    { name: '移除调度单', showType: [1, 4, 5] },
    { name: '恢复生产', showType: [3] },
    { name: '匹配车辆', showType: [4] }
  ]
})
// 右键菜单列表
const listShow = ref(0)
let menus = ref<any>({
  data: {}
})

// 一个方法使所有Mypopover组件都不显示
// const rightClick = (event, row, type) => {
/*
 * @description 右键菜单点击事件
 * @param row 当前行数据
 * @return void
 * */
const rightClick = (row: any, column: any, event: Event) => {
  console.log('test right click', row, column, event)
  // listShow.value = type
  let menu: any = document.querySelector('#MyRightClickMenu')

  // let mypopover: any = document.querySelector('#Mypopover')
  // if (mypopover) {
  //   mypopover.$el.style.display = 'none'
  // }

  //阻止元素发生默认的行为
  event.preventDefault()
  // 根据事件对象中鼠标点击的位置，进行定位
  //let temX = globalStore.isCollapse ? 65 : 220
  menu.style.left = (event as MouseEvent).clientX + 10 + 'px'
  menu.style.top = (event as MouseEvent).clientY - 60 + 'px'
  // 改变自定义菜单的隐藏与显示
  menu.style.display = 'block'
  menu.style.zIndex = 1000
  menus.value.data = row
}

const infoClick = async (index: number, itemName: any, handleClick: Function) => {
  // console.log('infoClick', index, itemName, toRaw(menus.value.data))
  const targetHandleClick = handleClick
  showMessageBox(
    `你确定要${itemName}嘛?`,
    async () => {
      console.log(itemName + 'success')
      targetHandleClick()
    },
    () => {}
  )
  // return
  switch (index) {
    case 0:
      // changeCarRef.value.show(menus.value.data)
      break
    case 1:
      // changeJblRef.value.show(menus.value.data)
      break
    case 2:
      break
    case 3:
      showMessageBox(
        '你确定要解绑车辆嘛?',
        async () => {},
        () => {
          //
        }
      )
      break
    case 4:
      break
    case 5:
      break
    case 6:
      showMessageBox(
        '你确定要匹配车辆吗?',
        async () => {
          ElMessage.success('匹配车辆成功')
        },
        () => {
          //
        }
      )
      break
  }
  let menu: any = document.querySelector('#MyRightClickMenu')
  menu.style.display = 'none'
}
// 鼠标左键关闭菜单
window.addEventListener('mouseup', function (event) {
  if (event.button === 0) {
    let menu: any = document.querySelector('#MyRightClickMenu')
    if (menu) {
      menu.style.display = 'none'
    }
  }
})
// 封装的确认框函数
const showMessageBox = (mes: string, success: Function, err: Function) => {
  ElMessageBox.confirm(mes, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true
  })
    .then(async () => {
      success()
    })
    .catch(() => {
      err()
    })
}
// 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
defineExpose({
  rightClick
})
</script>

<style scoped lang="scss">
.rightClickMenuDiv {
  position: absolute;
  display: none;
  background-color: #ffffff;
  border: 1px solid rgba($color: #c4c4c4, $alpha: 30%);
  border-radius: 6px;
  box-shadow: 0 0 6px rgb(0 0 0 / 20%);
  .menuUl {
    width: auto;
    height: auto;
    padding: 0 8px;
    margin: 8px 0;
    font-size: 14px;
    font-weight: bold;
    color: #606266;
    text-align: left;
    list-style: none;
    background-color: #ffffff;
    border: none;
    li {
      width: 100px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      cursor: pointer;
      border-bottom: 1px solid rgba($color: #c4c4c4, $alpha: 70%);
      &:hover {
        color: var(--el-color-primary);
      }
    }
    li:last-child {
      width: 100px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      cursor: pointer;
      border-bottom: 0 solid rgba($color: red, $alpha: 70%);
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>
